<script setup lang="ts">
import { ref } from "vue";
import MyTable from "@/components/MyTable.vue";

// 定义类型并 export 导出
export interface Person {
  id: number;
  name: string;
  age: number;
}

const list = ref<Person[]>([
  { id: 1, name: "张小花", age: 18 },
  { id: 2, name: "孙大明", age: 19 },
  { id: 3, name: "刘德忠", age: 17 },
]);

const list2 = ref<Person[]>([
  { id: 1, name: "赵小云", age: 18 },
  { id: 2, name: "刘蓓蓓", age: 19 },
  { id: 3, name: "姜肖泰", age: 17 },
]);
const deleteItem = (id: number) => {
  list.value = list.value.filter((item) => item.id !== id);
};
const deleteItem2 = (id: number) => {
  list2.value = list2.value.filter((item) => item.id !== id);
};
</script>

<template>
  <MyTable :data="list">
    <template #default="obj">
      <button @click="deleteItem(obj.id)">删除{{ obj }}</button>
    </template>
  </MyTable>
  <MyTable :data="list2">
    <template #default="{ id }">
      <button @click="deleteItem2(id)">删除{{ id }}</button>
    </template>
  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}
</style>
